It's my API:

type UploadVideoParams = {
    videofile: File   
    channelId: string | number
    name: string
}
    
const uploadVideo = (
    { videofile, channelId, name }: UploadVideoParams,
    onUploadProgress: (...args: any) => void
) => {  
    const formData = new FormData()   

    appendFormDataIfTruthy(formData, 'videofile', videofile)   
    appendFormDataIfTruthy(formData, 'channelId', channelId)   
    appendFormDataIfTruthy(formData, 'name', name)
    
    const source = CancelToken.source()
    
    return [
        axiosInstance({
            url: '/videos/upload',
            method: 'POST',
            headers: { 'Content-Type': 'multipart/form-data' },
            data: formData,
            onUploadProgress,
            cancelToken: source.token,
        }).then(res => res.data),
        (msg: string) => {
            source.cancel(msg) 
        },
    ] 
}

How can I implement a react query hook for this API? We use typescript, react v17 and react-query v3.18.1.

I add this mutation but get this error in API:

export const useUploadMutation = () =>   
    useMutation(
        VideosService.uploadVideo.name,
        VideosService.uploadVideo as unknown as MutationFunction<unknown, UploadVideoParams>,
        {
            onSuccess: () => {   
                queryClient.invalidateQueries([VideosService.getVideos.name])  
                queryClient.invalidateQueries([VideosService.getChannelVideos.name])
            },
        }
    )

but my API has this Error:

const cancelUpload: any Type 'void | [Promise, (msg: string) => void]' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)